import XtxMessage from "@/components/XtxMessage.vue"
//@ts-ignore
import type { Props } from "@/components/XtxMessage.vue"
import { h, render } from "vue"


//1.调用message方法渲染XtxMessage组件
export default function message(props: Props) {

    //2.将单文件组件转换成虚拟节点对象
    const vNode = h(XtxMessage, props)
    //创建渲染容器
    const container = document.createElement("div")
    // 将消息提示框渲染在页面中
    document.body.appendChild(container);
    // 3. 将虚拟节点对象渲染到真实DOM中
    render(vNode, container);

    //4.延迟3秒执行离场动画
    setTimeout(() => {
        //获取用于渲染、销毁消息框的响应式状态
        const toggle = vNode.component?.exposed?.toggle;
        //判断该状态是否存在
        if (typeof toggle !== "undefined") {
            //执行离场动画
            toggle.value = false;
            //延迟800毫秒等待动画执行完成销毁元素
            setTimeout(() => {
                document.body.removeChild(container)
            }, 800)
        }
    }, 3000)
}